<template>
	<view>
		<view class="">
			<view class="head-title u-m-b-10"><text>核实出库</text></view>
			<view class="u-p-t-20">
				<u-button size="medium" plain @click="addPack">+添加记录</u-button>
			</view>
			<view>
				<!-- <u-cell-group class="u-m-t-20">
					<u-cell-item :title="item.names+'-'+item.productname" v-for="(item, index) in packDetailsList" :key="index" @click="seePack(item,index)"
						class="u-p-r-0 u-p-l-0">
						<view slot="label">
							<view class="u-flex">
								<view class="u-flex-1">
									总价值{{item.amount}}元
								</view>
							</view>
						</view>
					</u-cell-item>
				</u-cell-group> -->
				
				<view class="table-list" v-if="packDetailsList.length > 0">
					<view class="tr u-border-bottom">
						<view class="th"><text>类型</text></view>
						<view class="th"><text>可回收物</text></view>
						<view class="th"><text>单价</text></view>
						<view class="th u-text-center"><text>总金额</text></view>
						<view class="th u-text-right"><text>操作</text></view>
					</view>
					<view v-for="(cell,i) in packDetailsList" :key="i">
						<view 
						class="tr"
						:class="i == packDetailsList.length - 1?'last':'u-border-bottom'"
						@click="seePack(cell,i)"
						>
							<view class="td">
								<view class="u-flex">
									<view>
										<view><text>{{cell.names}}</text></view>
									</view>
								</view>
							</view>
							<view class="td">
								<text>{{cell.productname}}</text>
							</view>
							<view class="td">
								<text>{{cell.price}}</text>
							</view>
							<view class="td u-text-center">
								<text>{{cell.amount}}</text>
							</view>
							<view class="td u-text-right">
								<text class="links">修改</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 添加回执单 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable z-index="998">
			<scroll-view class="u-p-30" :scroll-y="true" style="box-sizing: border-box;" v-if="show">
				<view style="max-height:80vh;">
					<view><text class="u-font-32" style="font-weight: bold;">回执单录入</text></view>
					<!-- 按重量 -->
					<u-form :model="packDetails" ref="uForm" label-width="200">
						<u-form-item label="选择出库物品">
							<view class="u-flex input-text" style="width: 100%;" @click="chooseProduct">
								<text class="u-flex-1">{{packDetails.productname || '请点击选择出库物品'}}</text>
								<u-icon name="arrow-right" class="u-tips-color"></u-icon>
							</view>
						</u-form-item>
						<u-form-item :label="`${isweighing?'毛重(KG)':'数量(件)'}`" required>
							<u-input v-model="packDetails.grossweight" type="digit" placeholder="请输入数字" :border="true" />
						</u-form-item>
						<u-form-item :label="`${isweighing?'皮重(KG)':''}`" v-if="isweighing == true" required>
							<u-input v-model="packDetails.tareweight" type="digit" placeholder="请输入数字" :border="true" />
						</u-form-item>
						<u-form-item :label="`${isweighing?'扣重(KG)':'扣件(件)'}`">
							<u-input v-model="packDetails.deductionweight" type="digit" placeholder="请输入数字" :border="true" />
						</u-form-item>
						<u-form-item :label="`扣点(%)`">
							<u-input v-model="packDetails.deductionratio" type="digit" placeholder="请输入数字" :border="true" />
						</u-form-item>
						<u-form-item :label="`出库价(元/${isweighing?'KG':'件'})`" required>
							<u-input v-model="packDetails.price" type="digit" placeholder="请输入数字" :border="true" />
						</u-form-item>
						<u-form-item label="总金额(元)" required>
							<u-input v-model="packDetails.amount" type="digit" placeholder="请输入数字" :border="true"/>
						</u-form-item>
						<u-form-item label="备注">
							<u-input v-model="packDetails.remarks" type="textarea" placeholder="请输入备注" :border="true"/>
						</u-form-item>
					</u-form>
					<template v-if="isedit">
						<view class="u-p-b-30"><u-button type="primary" @click="edit(packDetails)">修改</u-button></view>
						<view><u-button @click="delPackDetails(packDetails.index)">删除</u-button></view>
					</template>
					<template v-else>
						<u-button type="primary" @click="addPackDetails">确定</u-button>
					</template>
				</view>
			</scroll-view>
		</u-popup>
		
		<!-- 弹窗显示小票详情 -->
		<!-- <u-popup v-model="showPackdetails" mode="bottom" :closeable="true" border-radius="14" z-index="101">
			<view class="u-p-30 u-text-center">
				<text class="u-font-32">小票明细详情</text>
			</view>
			<u-cell-group>
				<u-cell-item title="小票" :arrow="false" @click="seePhoto(packdetails.img)">
					<view slot="right-icon">
						<u-image :src="packdetails.img" width="120" height="120"></u-image>
					</view>
				</u-cell-item>
				<u-cell-item title="磅单号" :arrow="false">{{packdetails.number}}</u-cell-item>
				<u-cell-item title="类型" :arrow="false">{{packdetails.typenames}}</u-cell-item>
				<u-cell-item title="毛重(KG)" :arrow="false" v-if="packdetails.isweighing">{{packdetails.grossweight}}</u-cell-item>
				<u-cell-item title="皮重(KG)" :arrow="false" v-if="packdetails.isweighing">{{packdetails.tareweight}}</u-cell-item>
				<u-cell-item title="净重(KG)" :arrow="false" v-if="packdetails.isweighing">{{packdetails.netweight}}</u-cell-item>
				<u-cell-item title="数量(件)" :arrow="false" v-else>{{packdetails.netweight}}</u-cell-item>
				<u-cell-item title="扣重(KG)" :arrow="false" v-if="packdetails.isweighing">{{packdetails.deductionweight}}</u-cell-item>
				<u-cell-item title="扣点" :arrow="false" v-if="packdetails.isweighing">{{packdetails.deductionratio}}</u-cell-item>
				<u-cell-item :title="`单价(元/${packdetails.isweighing?'KG':'件'})`" :arrow="false">{{packdetails.price}}</u-cell-item>
				<u-cell-item title="金额(元)" :arrow="false">{{packdetails.amount}}</u-cell-item>
				<u-cell-item title="备注" :arrow="false">{{packdetails.typeremarks}}</u-cell-item>
			</u-cell-group>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				isedit: false,
				isweighing: true,
				packDetailsList: [],
				endProves: [],
				// 回执信息
				packDetails: {
					names: '',
					productname: '',
					largeid: 0,
					productid: 0,
					remarks: "",
					price: null, //单价
					grossweight: null, //毛重
					tareweight: null, //皮重
					deductionweight: 0, //扣重
					deductionratio: 0, //扣点
					amount: null, //金额
				},
				rules: {
					productname: [
						{ required: true, message: '请选择可回收物' },
					],
					grossweight: [
						{ required: true, message: '请填写毛重' },
					],
					tareweight: [
						{ required: true, message: '请填写皮重' },
					],
					price: [
						{ required: true, message: '请填写单价' },
					],
					amount: [
						{ required: true, message: '请填写金额' },
					],
				},
				// 拍照
				fileList: [],
				fileUploadURL: getApp().globalData.fileUploadURL,
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			}),
			...mapState('shop', {
				goodsDetails: state => state.goodsDetails,
			})
		},
		watch:{
			show(val){
				if(!val){
					this.packDetails = {
						names: '',
						productname: '',
						largeid: 0,
						productid: 0,
						remarks: "",
						price: null, //单价
						grossweight: null, //毛重
						tareweight: null, //皮重
						deductionweight: 0, //扣重
						deductionratio: 0, //扣点
						amount: null, //金额
					},
					this.fileList = []
					this.$store.commit('shop/setGoodsDetails', [])
				}
			},
			goodsDetails(value){
				let confirmForm = {
					orderid: this.orderId,
					details: value
				}
				this.confirmChoose(confirmForm)
			},
			packDetailsList(val){
				console.log('packDetailsList',val)
				this.$emit('getData',val)
			}
		},
		methods: {
			// 回执单选择可回收物品
			chooseProduct(){
				uni.navigateTo({
					url: `/pages/shop/goodsChoose/goodsChoose?single=true`,
				});
			},
			// 关闭分拣清算窗口
			confirmChoose(confirmForm){
				console.log(confirmForm)
				if(confirmForm.details.length > 0){
					this.packDetails.productid = confirmForm.details[0].id
					this.packDetails.largeid = confirmForm.details[0].typeid
					this.packDetails.names = confirmForm.details[0].typename
					this.packDetails.productname = confirmForm.details[0].name
					this.isweighing = confirmForm.details[0].isweighing
					this.chooseShow = false
				}
			},
			//选择回执单类型
			addPack(){
				// uni.showActionSheet({
				// 	itemList: ['按重量录入', '按数量录入'],
				// 	success: (res)=> {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 		if(res.tapIndex == 0){
				// 			this.isweighing = true
				// 			this.isedit = false
				// 		}else{
				// 			this.isweighing = false
				// 			this.isedit = false
				// 		}
				// 		this.show = true
				// 	}
				// })
				this.isedit = false
				this.show = true
			},
			edit(data){
				// this.packDetailsList[this.index] = data
				this.$set(this.packDetailsList,this.index,data)
				console.log('this.packDetailsList',this.packDetailsList)
				this.show = false
			},
			// 查看回执单单个详情
			seePack(item,index){
				this.fileList = [
					{
						url: this.fileURL + this.endProves[index]
					}
				]
				this.isedit = true
				this.index = index
				this.packDetails = item
				this.packDetails.index = index
				this.packDetails.img = this.endProves[index]
				this.isweighing = this.packDetails.isweighing
				this.show = true
			},
			// 添加回执单列表
			addPackDetails(){
				// 验证
				let valid = true; // 默认通过
				for(let key in this.rules){
					
					let obj =  this.rules[key][0]
					if(obj.required){ // 是否必填
						if(this.packDetails[key] == '' || this.packDetails[key] == null){
							uni.showToast({
								title: obj.message,
								icon: 'none'
							})
							valid = false
						}
					}
				}
				// 用于判断是按重量还是按数量
				this.packDetails.isweighing = this.isweighing
				// if(this.packDetails.isweighing == false){
				// 	this.packDetails.deductionratio = 100
				// }
				
				if(valid){
					this.packDetailsList.push(this.packDetails)
					// this.packDetailsList.push({
					// 	productid: this.packDetails.productid,
					// 	grossweight: this.packDetails.grossweight,
					// 	tareweight: this.packDetails.tareweight,
					// 	deductionweight: this.packDetails.deductionweight,
					// 	deductionratio: this.packDetails.deductionratio,
					// 	price: this.packDetails.price,
					// 	amount: this.packDetails.amount,
					// 	remarks: this.packDetails.remarks
					// })
					this.show = false
				}
				
				console.log('packDetailsList',this.packDetailsList)
				// this.$emit('getData',this.packDetailsList)
			},
			// 删除回执单
			delPackDetails(index){
				uni.showModal({
					content: '您确定要删除该回执单吗？',
					success: (res)=> {
						if (res.confirm) {
							this.packDetailsList.splice(index,1)
							this.endProves.splice(index, 1)
							this.show = false
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 上传回执单回调
			receipUploadSuccess(data, index, lists, name) {
				this.endProves.push(data.datas.path)
				this.packDetails.img = data.datas.path
				// uni.showLoading({
				// 	title: '上传中,请稍后'
				// })
				// this.$u.get('Brother/DeliverOrder/DistinguishEndProves',{
				// 	fileName: data.datas.path
				// }).then((res)=>{
				// 	//console.log(res)
				// 	uni.hideLoading()
				// 	this.packDetails = res
				// 	this.packDetails.img = data.datas.path
				// 	this.totalAmount(res)
				// }).catch(()=>{
				// 	uni.hideLoading()
				// })
			},
			// 删除回执单回调
			receipRemovePhoto(index, lists, name) {
				this.fileList.splice(0, 1)
				this.endProves.splice(index, 1)
				this.packDetailsList.splice(index, 1)
				this.packDetails.img = ''
				// this.packDetailsList = [];
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					title: '提交失败，请重试'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		// width: 100%;
		input{
			height: 70rpx;
		}
	}
	.table-list{
		background-color: #fff;
		// padding: 0 20rpx;
		.tr{
			display: flex;
			align-items: center;
			&:active{
				opacity: 0.6;
			}
			.th{
				flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
	}
</style>
